
<template>
  <div id="salesExhibition" v-show="showPage" style="overflow-y: auto; overflow-x: hidden;">
    <el-card class="mg-b-10">
      <el-row>
        <el-col :span="22">
          <el-date-picker
            v-model="dateScope"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="select-prefix"
            size="mini"
            clearable
            filterable
            :picker-options="pickerOptions"
          ></el-date-picker>

          <el-select
            v-model="storeTypeVal"
            placeholder="选择门店类型"
            class="select-prefix"
            size="mini"
            filterable
          >
            <el-option
              v-for="(item, index) in $Options.storeTypes"
              :label="item.label"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="col_float_right">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleChangeSearch"
          >查 询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mg-b-10" v-if="keys">
      <div class="card-header">
        <h2>销售核心指标概览</h2>
      </div>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-1">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/Ftdc1FeYlTAfFC4ggSy2FL0KbOIL?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">订单数</span>
                <span class="num">{{keys.totalOrderCount}}</span>
                <span class="trend">
                  <span class="up" v-if="keys.totalOrderCountGrowthRate > 0">{{keys.totalOrderCountGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.totalOrderCountGrowthRate * -1}}%</span>环比上周期
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-2">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/FoPk_8T2RXMBQk-KbvX-aR84DwPg?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">商品销量</span>
                <span class="num">{{keys.totalSaleQuantity}}</span>
                <span class="trend">
                  <span class="up" v-if="keys.totalSaleQuantityGrowthRate > 0">{{keys.totalSaleQuantityGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.totalSaleQuantityGrowthRate * -1}}%</span>环比上周期
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-3">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/FlC4iIboh_4QfjMhyOQ6RRP_jvGq?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">销售金额</span>
                <span class="num">{{keys.totalSaleAmount}}</span>
                <span class="trend">
                  <span class="up" v-if="keys.totalSaleAmountGrowthRate > 0">{{keys.totalSaleAmountGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.totalSaleAmountGrowthRate * -1}}%</span>环比上周期
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-4">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/FmgkTUpEAACm9kfOLpAcBbCOT4_M?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">件单价</span>
                <span class="num">{{keys.perUnitPrice}}</span>
                <span class="trend">
                  <span class="up" v-if="keys.perUnitPriceGrowthRate > 0">{{keys.perUnitPriceGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.perUnitPriceGrowthRate * -1}}%</span>环比上周期
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-5">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/FkOPMfcG0N9-KS9ACl1vTNSNRdpq?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">连带率</span>
                <span class="num">{{keys.jointRate}}</span>
                <span class="trend">
                   <span class="up" v-if="keys.jointRateGrowthRate > 0">{{keys.jointRateGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.jointRateGrowthRate * -1}}%</span>环比上周期

                 
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="box-card border-6">
              <div class="box-card-left">
                <el-image
                  style="width: 32px; height: 32px"
                  src="https://goods.dingdian.xin/Fq-i4Ja7LC7OhmNc6Go_uwTTq6bJ?imageMogr2/thumbnail/400000@"
                  fit="cover"
                ></el-image>
              </div>
              <div class="box-card-right">
                <span class="text">客单价</span>
                <span class="num">{{keys.perCustomerPrice}}</span>
                <span class="trend">
                  <span class="up" v-if="keys.perCustomerPriceGrowthRate > 0">{{keys.perCustomerPriceGrowthRate}}%</span>
                  <span class="down" v-else>{{keys.perCustomerPriceGrowthRate * -1}}%</span>环比上周期
                </span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mg-b-10" :height="'260px'">
      <echartsTpl
        :id="'daySales'"
        :title="'每日销售情况'"
        :height="'260px'"
        :width="daySalesWidth"
        :options="daySalesOptions"
        ref="daySale"
      ></echartsTpl>
    </el-card>
    <el-card class="mg-b-10">
      <echartsTpl
        :id="'storeSales'"
        :title="'门店销售情况'"
        :height="'260px'"
        :width="storeSalesWidth"
        :options="storeSalesOptions"
        ref="storeSale"
      ></echartsTpl>
    </el-card>

    <el-row :gutter="10" class="mg-b-10">
      <el-col :span="12">
        <el-card>
          <el-row>
            <el-col :span="11">
              <echartsTpl
                :id="'areaSales'"
                :title="'地区销售排行榜'"
                :height="'260px'"
                :width="'100%'"
                :options="areaSalesOptions"
                ref="areaSale"
              ></echartsTpl>
            </el-col>
            <el-col :span="13">
              <el-table stripe :data="areaSalesData" border height="260"  :header-cell-style="tableHeader" >
                <el-table-column label="排名" prop="topNo" width="45"></el-table-column>
                <el-table-column label="地区" prop="province" width="60"></el-table-column>
                <el-table-column label="销量" prop="totalSaleQuantity"  sortable></el-table-column>
                <el-table-column label="销售金额" prop="totalSaleAmount" width="96" sortable></el-table-column>
                <el-table-column label="金额占比" prop="saleAmountRate" width="70"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <echartsTpl
            :id="'prices'"
            :title="'价格带'"
            :height="'260px'"
            :width="'100%'"
            :options="priceOptions"
            ref="price"
          ></echartsTpl>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="mg-b-10">
      <el-row class="mg-b-10">
        <el-col :span="24" class="mg-b-10">
          <el-select
            class="select-prefix"
            size="mini"
            v-model="storeNo"
            placeholder="请选择门店"
            clearable
            filterable
            style="margin-right: 30px"
            @change="changeStore"
          >
            <template slot="prefix">
              <span class="prefixSlot">选择门店</span>
            </template>
            <el-option-group v-for="group in storeList" :key="group.cityId" :label="group.city">
              <el-option
                v-for="item in group.list"
                :key="item.storeNo"
                :label="item.storeName"
                :value="item.storeNo"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="7">
          <div class="card-header">
            <h2>品类销售排行榜</h2>
          </div>
          <el-table stripe :data="categoryList" border   :header-cell-style="tableHeader" height="300">
            <el-table-column label="排名" prop="topNo" width="45"></el-table-column>
            <el-table-column label="品类" prop="categoryName"></el-table-column>
            <el-table-column label="销量" prop="totalSaleQuantity" sortable width="70px"></el-table-column>
            <el-table-column label="销售金额" prop="totalSaleAmount" sortable width="94px"></el-table-column>
            <el-table-column label="金额占比" prop="saleAmountRate" width="70"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="7">
          <div class="card-header">
            <h2>品牌销售TOP20</h2>
          </div>
          <el-table stripe :data="brandList" border   :header-cell-style="tableHeader" height="300">
            <el-table-column label="排名" prop="topNo" width="45"></el-table-column>
            <el-table-column label="品牌" prop="brandName" show-overflow-tooltip>></el-table-column>
            <el-table-column label="销量" prop="totalSaleQuantity" sortable ></el-table-column>
            <el-table-column label="销售金额" prop="totalSaleAmount" sortable width="94px"></el-table-column>
            <el-table-column label="金额占比" prop="saleAmountRate" width="70"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10">
          <div class="card-header">
            <h2>商品销售TOP50</h2>
          </div>
          <el-table stripe :data="goodsList" border  :header-cell-style="tableHeader"   height="300">
            <el-table-column label="排名" prop="topNo" width="45"></el-table-column>
            <el-table-column label="品牌" prop="brandName" show-overflow-tooltip></el-table-column>
            <el-table-column label="商品名称" prop="goodsName" show-overflow-tooltip>></el-table-column>
            <el-table-column label="款号" prop="goodsCode" show-overflow-tooltip>></el-table-column>
            <el-table-column label="销量" prop="totalSaleQuantity" sortable ></el-table-column>
            <el-table-column label="销售金额" prop="totalSaleAmount" sortable  width="94px"></el-table-column>
            <el-table-column label="金额占比" prop="saleAmountRate" width="70"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import echartsTpl from "../../commonComponents/echarts"
import { getDay } from "../../../api/commonJs/getDays"
import $options from "../../../api/json/selectOptions"

export default {
  components: { echartsTpl },
  data() {
    return {
      showPage: false,
      userInfos: JSON.parse(sessionStorage.getItem('userInfos')),
      storeTypeVal: 0,//门店类型
      storeNo: "",//选中门店
      dateScope: "",//选择日期范围
      //选择日期限制
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      daySalesWidth: '100%', //每日销售情况宽度
      storeSalesWidth: '100%',//门店销售情况宽度
      areaSalesData: null, //地区销售排行榜数据
      storeList: [], //全部门店list
      keys: null,//销售核心指标
      categoryList: [],// 品类销量排行榜
      brandList: [],// 品牌销量排行榜
      goodsList: [],// 商品销量排行榜
      storeTypeList: $options.storeTypes,
      daySalesOptions: { //每日销售情况
        color:["#e60012"],
       legend: {
          data: ['销售金额']
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value',
          name: '销售金额',
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [{
          data: [],
          type: 'line',
          label: {
              normal: {
                show: true,
              }
            },
        }],
         grid:{
          left:"80px",
          right:"60px",
          bottom:'20px'
        }
      },
      storeSalesOptions: {//门店销售情况
        dealxTitle: true, //处理x轴文字
        color: ['#e60012', '#22ce00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['销售金额', '平均值']
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLabel:{
              interval:0
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '销售金额',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '销售金额',
            type: 'bar',
            barWidth: '60%',
            data: [],
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
          },
          {
            name: '平均值',
            type: 'line',
            data: [],
             
          }
        ],
        grid:{
          left:"60px",
          right:"40px",
          bottom:'20px'
        }
      },
      areaSalesOptions: { //地区销售排行榜
        color: [],
        grid:{
          left:"10px",
          right:"10px",
          bottom:'10px',
          top:"10px"
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let val = params.value ? params.value : 0;
            if (params.data) {
              return params.name + "<br/> 排名：" + params.data.topNo + "<br/> 销量：" + val + "<br/> 销售金额：" + params.data.totalSaleAmount + "<br/> 金额占比：" + params.data.saleAmountRate
            } else {
              return params.name + "<br/> 销量：" + val
            }
          }
        },
        visualMap: {
          min: 1,
          max: 100,
          text: ['max', 'min'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#61ddff', '#1f2f98']
          },
          show: false
        },
        series: [
          {
            type: 'map',
            mapType: 'china', // 自定义扩展图表类型
            itemStyle: {
              emphasis: { label: { show: true } },
              areaColor: "#d0f1fb",
              borderColor: "#ffffff"
            },
            data: [],
          }
        ]

      },
      priceOptions: { //价格带
        color: ['#e60012', '#22ce00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>{a0}:{c0}%<br/>{a1}:{c1}%'
        },
        legend: {
          data: ['销量占比', '库存占比']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['0-20', '20-50', '50-100', '100-200', '200-500', '500以上']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel:{
             formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '销量占比',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}%'
              }
            },
             barWidth:"30%",
            barGap: 0.4,
            data: [],
          },
          {
            name: '库存占比',
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}%'
              }
            },
            barWidth:"30%",
            type: 'bar',
            data: [],
          }
        ]
      }
    }
  },

  mounted() {
    //获取最近7天日期
    this.dateScope = [new Date(getDay(-7)), new Date(getDay(-1))];
    this.initData();
    this.getStoreListByGroup()
  },
  methods: {
    /**初始化数据*/
    initData() {
      let that = this;
      this.$nextTick(() => {
        this.handlePageData(()=>{
          that.showPage = true;
          that.$refs.daySale.uploadData();
          setTimeout(()=>{
          that.$refs.storeSale.uploadData();
        },100)
          that.$refs.areaSale.uploadData();
          that.$refs.price.uploadData();
        })
      })
    },
    /**查询 */
    handleChangeSearch() {
      let that = this;
      this.handlePageData(() => {
        that.$refs.daySale.uploadData();
        setTimeout(()=>{
          that.$refs.storeSale.uploadData();
        },100)
        that.$refs.areaSale.uploadData();
        that.$refs.price.uploadData();
      })
    },
    /**表头样式 */
    tableHeader({ row, column, rowIndex, columnIndex }){
      return 'padding:0 !important;'
    },
    /**页面数据渲染 */
    handlePageData(cb) {
      let { dateScope } = this, that = this,
        dateFrom = this.formate(dateScope[0].getTime(), "yyyyMMdd"),
        dateTo = this.formate(dateScope[1].getTime(), "yyyyMMdd");

      let params = {
        dateFrom: Number(dateFrom), //开始时间
        dateTo: Number(dateTo),//结束时间
        storeType: Number(this.storeTypeVal)  == 0 ? -1 : Number(this.storeTypeVal)
        // storeNo:  //门店编码
      }

      Promise.all([this.getKeys(params), this.getDaySales(params), this.getStoreSales(params), this.getAreaSales(params), this.getPrices(params), this.getCategoryList(params), this.getBrandList(params), this.getGoodsList(params)]).then((val) => {
        cb && cb();
      }).catch(err => {
        cb && cb();
      });
    },
    /**获取店铺列表 */
    getStoreListByGroup() {
      this.$server.salesExhibitionApi.getStore().then(res => {
        this.storeList = res.data
      })
    },
    /**处理日期范围格式 */
    doDaySalesData() {
      let { dateScope } = this;
      let dayLen = parseInt((dateScope[1].getTime() - dateScope[0].getTime()) / 1000 / 60 / 60 / 24),
        curDate = new Date(this.formate(dateScope[1].getTime(), "yyyy/MM/dd")),
        days = [];

      days.unshift(this.formate(curDate, 'MM.dd'));
      for (let i = dayLen - 1; i >= 0; i--) {
        curDate.setDate(curDate.getDate() - 1);
        days.unshift(this.formate(curDate, 'MM.dd'));
      }
      return days;
    },
    /**销售核心指标概览 */
    getKeys(params) {
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getKeys(params).then(res => {
          this.keys = res.data;
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**获取每日销售情况 */
    getDaySales(params) {
      let { daySalesOptions } = this, that = this;

      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getDaySales(params).then(res => {
          let data = res.data;
          daySalesOptions.xAxis["data"] = this.doDaySalesData();
          daySalesOptions.series[0]["data"] = data.totalSaleAmountList;
          that.daySalesOptions = daySalesOptions;
          //计算宽度
          that.daySalesWidth = daySalesOptions.xAxis["data"].length > 28 ? (daySalesOptions.xAxis["data"].length * 60) + "px" : '100%';
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**获取门店销量情况 */
    getStoreSales(params) {
      let { storeSalesOptions } = this, that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getStoreSales(params).then(res => {
          let data = res.data;
          storeSalesOptions.xAxis[0]["data"] = data.storeList;
          storeSalesOptions.series[0]["data"] = data.totalSaleAmountList;
          storeSalesOptions.series[1]["data"] = data.avgSaleAmountList;
          that.storeSalesOptions = storeSalesOptions;

          //计算宽度
           that.storeSalesWidth = data.storeList.length > 16 ? (data.storeList.length * 66) + "px" : '100%';
          // that.$refs.storeSale.uploadData();
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**获取地区销售排行榜 */
    getAreaSales(params) {
      let { areaSalesOptions } = this, that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getAreaSales(params).then(res => {
          let data = res.data;
          data.forEach(item => {
            item.saleAmountRate = that.percentage(item.saleAmountRate);
          })
          this.areaSalesData = data;
          
          areaSalesOptions.series[0]["data"] = data.map(item => ({
            name: item.province.replace("省",'').replace("市",''),
            value: item.totalSaleQuantity,
            topNo: item.topNo, //名次
            totalSaleAmount: item.totalSaleAmount, //销售总额
            saleAmountRate: item.saleAmountRate //销售额占比
          }))
          let maxVal = data.sort((a, b) => {
            return b.totalSaleQuantity - a.totalSaleQuantity;
          })
          areaSalesOptions.visualMap.max = maxVal[0].totalSaleQuantity; //最大值
          areaSalesOptions.visualMap.min = maxVal[data.length - 1].totalSaleQuantity; //最小值

          this.areaSalesOptions = areaSalesOptions;
          that.$refs.areaSale.uploadData();
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**获取价格带 */
    getPrices(params) {
      let { priceOptions } = this, that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getPrices(params).then(res => {
          let data = res.data;
          priceOptions.xAxis[0]["data"] = data.priceTierList.map((item, index) => {
            if (index == 0) {
              return 0 + "-" + item
            } else if (index == data.priceTierList.length - 1) {
              return data.priceTierList[index - 1] + '以上'
            } else {
              return data.priceTierList[index - 1] + "-" + item
            }
          })

          priceOptions.series[0]["data"] = data.saleQuantityRateList.map(item => {
            return  item ? item : 0;
          });
          priceOptions.series[1]["data"] = data.stockQuantityRateList.map(item => {
            return  item ? item : 0;
          })

          that.priceOptions = priceOptions
          // that.$refs.price.uploadData();
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /** 品类销售排行榜 */
    getCategoryList(params) {
      let that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getCategory(params).then(res => {
          let data =  res.data
          data.forEach(item => {
            item.saleAmountRate = that.percentage(item.saleAmountRate);
          })
          this.categoryList = data;
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**品牌销售TOP20 */
    getBrandList(params) {
      let that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getBrand(params).then(res => {
          let data =  res.data
          data.forEach(item => {
            item.saleAmountRate = that.percentage(item.saleAmountRate);
          })
          this.brandList = data;
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**商品销售TOP50 */
    getGoodsList(params) {
      let that = this;
      return new Promise((resolve, reject) => {
        this.$server.salesExhibitionApi.getGoods(params).then(res => {
          let data =  res.data
          data.forEach(item => {
            item.saleAmountRate = that.percentage(item.saleAmountRate);
          })
          this.goodsList = data;
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**转为百分数 */
    percentage(data) {
      return data + "%"
    },
    /**选择店铺 */
    changeStore(e){
      let { dateScope , storeNo} = this, that = this,
        dateFrom = this.formate(dateScope[0].getTime(), "yyyyMMdd"),
        dateTo = this.formate(dateScope[1].getTime(), "yyyyMMdd");
      let params = {
        dateFrom: Number(dateFrom), //开始时间
        dateTo: Number(dateTo),//结束时间
        storeType: Number(this.storeTypeVal)  == 0 ? -1 : Number(this.storeTypeVal),
        storeNo: storeNo//门店编码
      }
      Promise.all([this.getCategoryList(params), this.getBrandList(params), this.getGoodsList(params)]).then((val) => {})
    }
  }
}
</script>
<style lang="less" scoped>
//销售看板

.box-card {
  display: flex;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  // width: 100%;
  border-radius: 5px;
  height: 95px;
  background-color: #ffffff;

  .box-card-left {
    margin-right: 10px;
  }
  .box-card-right {
    display: flex;
    flex-direction: column;
    .text {
      font-size: 12px;
      color: #666;
      font-family: Microsoft YaHei;
      margin-bottom: 12px;
    }
    .num {
      font-size: 22px;
      color: #474747;
      font-family: Helvetica;
      line-height: 1;
      margin-bottom: 10px;
    }
    .trend {
      font-size: 12px;
      color: #666666;
      line-height: 1;
      .up {
        color: #e60012;
      }
      .up::before {
        content: "↑";
        font-size: 12px;
        color: #e60012;
      }
      .down {
        color: #22ce00;
      }
      .down::before {
        content: "↓";
        font-size: 12px;
        color: #22ce00;
      }
    }
  }
}
.box-card:hover {
  transform: scale(1.1);
}
.border-1 {
  box-shadow: 0px 3px 10px 0px rgba(255, 112, 104, 0.3);
  border: solid 1px rgba(230, 0, 18, 0.15);
}
.border-2 {
  box-shadow: 0px 3px 10px 0px rgba(252, 198, 8, 0.3);
  border: solid 1px rgba(253, 200, 5, 0.15);
}
.border-3 {
  box-shadow: 0px 3px 10px 0px rgba(68, 151, 238, 0.3);
  border: solid 1px rgba(47, 178, 244, 0.15);
}
.border-4 {
  box-shadow: 0px 3px 10px 0px rgba(233, 198, 144, 0.3);
  border: solid 1px rgba(231, 196, 142, 0.15);
}
.border-5 {
  box-shadow: 0px 3px 10px 0px rgba(83, 213, 126, 0.3);
  border: solid 1px rgba(83, 213, 125, 0.15);
}
.border-6 {
  box-shadow: 0px 3px 10px 0px rgba(133, 96, 243, 0.3);
  border: solid 1px rgba(134, 97, 244, 0.15);
}
.card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  h2 {
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }
}

.el-table thead tr.tableHeader th{
  padding:0px !important;
}
</style>
